<template>
  <div class="upload-image">
    <div class="image-item origin-item">
        <div class="image-title">原图</div>
        <div span="8" class="origin-image" @mousewheel.prevent="rollImg">
            <img :src="beforeImg" alt="" class="img" ref="imgDiv" @mousedown="move" />
      <div class="show-big-image" @click="checkBigImg(beforeImg)"> <i class="iconfont icon-quanping"></i></div>
        </div>

    </div>

    <div class="image-item ">
      <div class="image-title">效果图</div>
        <div span="8" class="design-image" @mousewheel.prevent="rollImg">
        <img :src="afterImg" alt="" class="img1" ref="imgDiv1" @mousedown="move1" />
      <div class="show-big-image" @click="checkBigImg(afterImg)"> <i class="iconfont icon-quanping"></i></div>
    </div>


    </div>

  <CheckBig @hidden='hidden' :bigImg='bigImg' v-if="showBigimage" ref="showBig" />

  </div>
</template>

<script>
import CheckBig from './checkBigImage'
export default { 
    components:{ CheckBig},
    props:['afterImg' , 'sliderHeader', 'beforeImg'],
    data(){
        return{
            sacle : 100,
            bigImg: [],
            showBigimage : false
        }
    },
    methods:{
        checkBigImg(url){
            this.bigImg = [url]
            this.showBigimage = true
        },
        hidden(){
            this.showBigimage = false
        },

        rollImg(){
            this.sacle = this.sliderHeader * 5
            this.sacle += event.wheelDelta / 12;
            this.$refs.imgDiv.style.width = this.sacle + '%'
            this.$refs.imgDiv1.style.width = this.sacle + '%'
            this.$emit('setZoom',this.sacle)
            return false
        },
        changeImgSize(val){
            this.sacle = val * 4
            this.$refs.imgDiv.style.width = this.sacle + '%'
            this.$refs.imgDiv1.style.width = this.sacle + '%'
        },
        move(e){
            e.preventDefault();
            // 获取元素
            var left = document.querySelector(".origin-image");
            var img = document.querySelector(".img");
            let Rimg = document.querySelector('.img1');
            var x = e.pageX - img.offsetLeft;
            var y = e.pageY - img.offsetTop;
            
            // 添加鼠标移动事件
            left.addEventListener("mousemove", move);
        function move(e) {
            img.style.left = e.pageX - x + "px";
            img.style.top = e.pageY - y + "px";
            Rimg.style.left = img.style.left
            Rimg.style.top = img.style.top
            let imgWidth = Math.round(img.getBoundingClientRect().width)
            let imgHeight = Math.round(img.getBoundingClientRect().height)
            let outWidth = Math.round(left.getBoundingClientRect().width)
            let outHeight = Math.round(left.getBoundingClientRect().height)
            // console.log(imgHeight,imgWidth,'height,width')

            if(imgWidth < outWidth && imgHeight < outHeight){
                if(parseInt(img.style.left) < imgWidth/2){
                    img.style.left = imgWidth / 2 + 'px'
                }
                if(parseInt(img.style.top) <imgHeight / 2){
                    img.style.top = imgHeight / 2 + 'px'
                }
                if(parseInt(img.style.left) - outWidth / 2  >  (outWidth - imgWidth) /2){
                    img.style.left = outWidth / 2 + (outWidth / 2 - imgWidth / 2) + 'px'
                }

                if(parseInt(img.style.top) - outHeight / 2  >  (outHeight - imgHeight) /2){
                    img.style.top = outHeight / 2 + (outHeight / 2 - imgHeight / 2) + 'px'
                }
            }
            // 如果图片的宽度小于 外层的宽度 并且图片的高大于 外层的高度
            if(imgWidth < outWidth && imgHeight >  outHeight) {
            
            let left = parseInt(img.style.left)
            let top = parseInt(img.style.top)
            if(left < imgWidth / 2 ){
                img.style.left = imgWidth / 2 + 'px'
            }
            if(left > outWidth - imgWidth + imgWidth /2 ){
                img.style.left = outWidth - imgWidth + imgWidth / 2 + 'px'
            }
            if( (imgHeight - outHeight) / 2 < parseInt(img.style.top) - outHeight / 2 ){
                img.style.top = imgHeight / 2 + 'px'
            }
            if( top < outHeight / 2){
                if( outHeight / 2 > top + (imgHeight - outHeight ) / 2  ){
                img.style.top = outHeight / 2 - (imgHeight - outHeight ) / 2 + 'px'
                }
            }

            }
            // 如果图片的宽度 大于 外层的宽度 并且图片的高 小于 外层的高度
            if(imgWidth > outWidth && imgHeight <  outHeight) {
            let left = parseInt(img.style.left)
            let top = parseInt(img.style.top)
            if(top < imgHeight / 2 ){
                img.style.top = imgHeight / 2 + 'px'
                
            }
            if(top > outHeight - imgHeight + imgHeight /2 ){
                img.style.top = outHeight - imgHeight + imgHeight / 2 + 'px'
            }

            if( (imgWidth - outWidth) / 2 < parseInt(img.style.left) - outWidth / 2 ){
                img.style.left = imgWidth / 2 + 'px'
            }

            if( left < outWidth / 2){
                if( outWidth / 2 > left + (imgWidth - outWidth ) / 2  ){
                img.style.left = outWidth / 2 - (imgWidth - outWidth ) / 2 + 'px'
                }
            }
        }
        //  如果 图片的宽度 和高度 都大于外层的高度和宽度
            if(imgWidth > outWidth && imgHeight > outHeight){

                if( (imgWidth - outWidth) / 2 < parseInt(img.style.left) - outWidth / 2 ){
                    img.style.left =   imgWidth / 2 + 'px'
                }
                if( (imgHeight - outHeight) / 2 < parseInt(img.style.top) - outHeight / 2 ){
                    img.style.top = imgHeight / 2 + 'px'
                   

                }
                let left = parseInt(img.style.left)
                let top = parseInt(img.style.top)
                if( left < outWidth / 2){
                    if( outWidth / 2 > left + (imgWidth - outWidth ) / 2  ){
                    img.style.left = outWidth / 2 - (imgWidth - outWidth ) / 2 + 'px'
                    }
                }

                if( top < outHeight / 2){
                    if( outHeight / 2 > top + (imgHeight - outHeight ) / 2  ){
                    img.style.top = outHeight / 2 - (imgHeight - outHeight ) / 2 + 'px'
                    }
                }
                }
                Rimg.style.left = img.style.left
                Rimg.style.top = img.style.top
            }
            // 添加鼠标抬起事件，鼠标抬起，将事件移除
            img.addEventListener("mouseup", function() {
                left.removeEventListener("mousemove", move);
                

            });
            // 鼠标离开父级元素，把事件移除
            left.addEventListener("mouseout", function() {
                left.removeEventListener("mousemove", move);
            });
        },
        move1(e){
            e.preventDefault();
            // 获取元素
            var left = document.querySelector(".design-image");
            var img = document.querySelector(".img1");
            let Rimg = document.querySelector('.img');
            var x = e.pageX - img.offsetLeft;
            var y = e.pageY - img.offsetTop;
            
            // var rx = e.pageX / 2 - Rimg.offsetLeft;
            // var ry = e.pageY / 2 - Rimg.offsetTop;


            
            // 添加鼠标移动事件
            left.addEventListener("mousemove", move);
        function move(e) {
            img.style.left = e.pageX - x + "px";
            img.style.top = e.pageY - y + "px";
            Rimg.style.left = img.style.left
            Rimg.style.top = img.style.top
            let imgWidth = Math.round(img.getBoundingClientRect().width)
            let imgHeight = Math.round(img.getBoundingClientRect().height)
            let outWidth = Math.round(left.getBoundingClientRect().width)
            let outHeight = Math.round(left.getBoundingClientRect().height)
            // console.log(imgHeight,imgWidth,'height,width')

            if(imgWidth < outWidth && imgHeight < outHeight){
                if(parseInt(img.style.left) < imgWidth/2){
                    img.style.left = imgWidth / 2 + 'px'
                }
                if(parseInt(img.style.top) <imgHeight / 2){
                    img.style.top = imgHeight / 2 + 'px'
                }
                if(parseInt(img.style.left) - outWidth / 2  >  (outWidth - imgWidth) /2){
                    img.style.left = outWidth / 2 + (outWidth / 2 - imgWidth / 2) + 'px'
                }

                if(parseInt(img.style.top) - outHeight / 2  >  (outHeight - imgHeight) /2){
                    img.style.top = outHeight / 2 + (outHeight / 2 - imgHeight / 2) + 'px'
                }
            }
            // 如果图片的宽度小于 外层的宽度 并且图片的高大于 外层的高度
            if(imgWidth < outWidth && imgHeight >  outHeight) {
            
            let left = parseInt(img.style.left)
            let top = parseInt(img.style.top)
            if(left < imgWidth / 2 ){
                img.style.left = imgWidth / 2 + 'px'
            }
            if(left > outWidth - imgWidth + imgWidth /2 ){
                img.style.left = outWidth - imgWidth + imgWidth / 2 + 'px'
            }
            if( (imgHeight - outHeight) / 2 < parseInt(img.style.top) - outHeight / 2 ){
                img.style.top = imgHeight / 2 + 'px'
            }
            if( top < outHeight / 2){
                if( outHeight / 2 > top + (imgHeight - outHeight ) / 2  ){
                img.style.top = outHeight / 2 - (imgHeight - outHeight ) / 2 + 'px'
                }
            }

            }
            // 如果图片的宽度 大于 外层的宽度 并且图片的高 小于 外层的高度
            if(imgWidth > outWidth && imgHeight <  outHeight) {
            let left = parseInt(img.style.left)
            let top = parseInt(img.style.top)
            if(top < imgHeight / 2 ){
                img.style.top = imgHeight / 2 + 'px'
                
            }
            if(top > outHeight - imgHeight + imgHeight /2 ){
                img.style.top = outHeight - imgHeight + imgHeight / 2 + 'px'
            }

            if( (imgWidth - outWidth) / 2 < parseInt(img.style.left) - outWidth / 2 ){
                img.style.left = imgWidth / 2 + 'px'
            }

            if( left < outWidth / 2){
                if( outWidth / 2 > left + (imgWidth - outWidth ) / 2  ){
                img.style.left = outWidth / 2 - (imgWidth - outWidth ) / 2 + 'px'
                }
            }
        }
        //  如果 图片的宽度 和高度 都大于外层的高度和宽度
            if(imgWidth > outWidth && imgHeight > outHeight){

                if( (imgWidth - outWidth) / 2 < parseInt(img.style.left) - outWidth / 2 ){
                    img.style.left =   imgWidth / 2 + 'px'
                }
                if( (imgHeight - outHeight) / 2 < parseInt(img.style.top) - outHeight / 2 ){
                    img.style.top = imgHeight / 2 + 'px'
                   

                }
                let left = parseInt(img.style.left)
                let top = parseInt(img.style.top)
                if( left < outWidth / 2){
                    if( outWidth / 2 > left + (imgWidth - outWidth ) / 2  ){
                    img.style.left = outWidth / 2 - (imgWidth - outWidth ) / 2 + 'px'
                    }
                }

                if( top < outHeight / 2){
                    if( outHeight / 2 > top + (imgHeight - outHeight ) / 2  ){
                    img.style.top = outHeight / 2 - (imgHeight - outHeight ) / 2 + 'px'
                    }
                }
                }
                Rimg.style.left = img.style.left
                Rimg.style.top = img.style.top
            }
            // 添加鼠标抬起事件，鼠标抬起，将事件移除
            img.addEventListener("mouseup", function() {
                left.removeEventListener("mousemove", move);
                

            });
            // 鼠标离开父级元素，把事件移除
            left.addEventListener("mouseout", function() {
                left.removeEventListener("mousemove", move);
            });
        },
    }
    
};
</script>

<style lang='scss' scoped>
.upload-image {
  width: 100%;
  background-color: #fff;
  height: 100%;
  display: flex;
}
.show-big-image{
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}
.image-item {
  width: 50%;
  .image-title {
    width: 200px;
    height: 50px;
    margin: 0 auto;
    background-color: #94d1ca;
    border-radius: 0 0 10px 10px;
    font-size: 18px;
    color: #fff;
    line-height: 50px;
    text-align: center;
    margin-bottom: 50px;
  }
}
.origin-image {
    position: relative;
    width: 95%;
    margin: 0 auto;
    height:85%;
    background-color: #fff;
    overflow: hidden;
    border: 1px solid #fff;
}
.origin-item::after{
    content: '';
    width: 3px;
    height: 88%;
    position: absolute;
    bottom: 1%;
    right: 59.88%;
    background-color: #ccc;
}
.design-image{
    position: relative;
    width: 95%;
    margin: 0 auto;
    height:85%;
    background-color: #fff;
    overflow: hidden;
    border: 1px solid #fff;
}
.origin-image:hover{
    outline:  3px solid #ffe329;
}
.design-image:hover{
    outline:  3px solid #ffe329;
}
.img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  cursor: move;
}
.img1{
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  cursor: move;
}

</style>